<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>商品列表</title>
	<!--  引入初始化css文件 -->
	<link rel="stylesheet" href="css/base.css">
	<link rel="stylesheet" href="css/common.css">
	<!--  引入列表页css文件  -->
	<link rel="stylesheet" href="css/list.css">

	<!--  引入 favicon.ico 网页图标-->
	<link rel="shortcut icon" href="bitbug_favicon.ico" type="image/x-icon"/>
	<!-- 生成该图标 http://www.bitbug.net/  -->
	<meta name="description" content="个人网站仅作为学习使用，供大家参考！">
	<meta name="keywords" content="个人学习，个人学习，个人学习，欢迎参考"> 
	<link rel="stylesheet" href="./font/iconfont.css">
</head>
<body>
	<!-- 顶部快捷导航栏 -->
	<div class="shortcut">
		<div class="w">
			<!--  直接使用左右浮动的 类名  -->
			<div class="fl">
				<ul>
					<li><a href="#">品优购欢迎您！ </a></li>
					<li>
						<a href="#">请登录</a>
						<a href="register.html" class="style-red">免费注册</a>
					</li>
				</ul>
			</div>
			<div class="fr">
				<ul>
					<li><a href="#">我的订单</a></li>
					<!--  京东的做法  -->
					<li class="spacer"></li>
					<li>
						<a href="#">我的品优购</a>
						<i class="iconfont icon-ai-arrow-down"></i>
					</li>
					<li class="spacer"></li>
					<li><a href="#">品优购会员</a></li>
					<li class="spacer"></li>
					<li><a href="#">企业采购</a></li>
					<li class="spacer"></li>
					<li>
						<a href="#">关注品优购</a>
						<i class="iconfont icon-ai-arrow-down"></i>
					</li>
					<li class="spacer"></li>
					<li>
						<a href="#">客户服务</a>
						<i class="iconfont icon-ai-arrow-down"></i>
					</li>
					<li class="spacer"></li>
					<li>
						<a href="#">网站导航</a>
						<i class="iconfont icon-ai-arrow-down"></i>
					</li>
				</ul>
			</div>
		</div>
	</div>
	<!-- header 制作 -->
	<div class="header w">
		<div class="logo">
			<!-- 加一个h1标签，告诉搜索引擎这里很重要，h1首页只能用一次就是在这里使用，其他的可以使用h2 或者 h3 靠后的标签-->
			<h1>
				<!-- logo是很重要的一块，里面的字隐藏，不是给人看的，而是给搜索引擎看的 
				淘宝也是这种写法！！
				-->
				<a href="index.html" title="品优购">品优购</a>
			</h1>
		</div>
		<!-- sk，秒杀 -->
		<div class="sk">
			<img src="./uploads/sk.png" alt="">
		</div>
		<div class="search">
			<input type="text" name="search" class="text">
			<button class="btn">搜索</button>
		</div>

		<div class="hotwords">
			<a href="#" class="style-red">优惠购首发</a>
			<a href="#">亿元优惠</a>
			<a href="#">9.9元团购</a>
			<a href="#">美满99减30</a>
			<a href="#">办共同品</a>
			<a href="#">电脑</a>
			<a href="#">通信</a>
		</div>

		<div class="shopcar">
			<i class="iconfont icon-gouwuche"></i>
			我的购物车
			<i class="iconfont icon-jiantou1"></i>
			<i class="count">8</i> 
		</div>
	</div>
	<!-- nav 制作 -->
	<div class="nav">
		<div class="w">
			<div class="sk_list fl">
				<ul>
					<li><a href="#">品优秒杀</a></li>
					<li><a href="#">即将告罄</a></li>
					<li><a href="#">超值低价</a></li>
				</ul>
			</div>
			<div class="sk_con fr">
				<ul>
					<li><a href="#" style="color: red;">女装</a></li>
					<li><a href="#">男鞋</a></li>
					<li><a href="#">男装</a></li>
					<li><a href="#">男鞋</a></li>
					<li><a href="#">母婴童装</a></li>
					<li><a href="#">食品</a></li>
					<li><a href="#">智能数码</a></li>
					<li><a href="#">户外运动</a></li>
					<li><a href="#">更多分类 <span class="iconfont icon-ai-arrow-down"></span></a></li>
				</ul>
			</div>
		</div>
	</div>

	<!-- 列表页的内容区 -->
	<div class="sk_container w">
		<div class="sk_hd">
			<img src="./uploads/bg_03.png" alt="">
		</div>
		<div class="sk_bd">
			<ul>
				<li class="sk_goods">
					<a href="detail.html">
						<img src="./uploads/mobile.jpg" alt="">
						<h5 class="sk_goods_title">Apple苹果iphone 6s Plus (A1699) 32G 金色
						移动联通电信4G手机	
						</h5>
					</a>
					<p class="sk_goods_price"><em>￥6080</em><del>￥6900</del></p>
					<div class="sk_goods_progress">
						已售<em>87%</em>
						<div class="bar">
							<div class="bar_in">
								
							</div>
						</div>
						剩余<em>89</em>件
					</div>
					<a href="#" class="sk_goods_buy">立即抢购</a>
				</li>
				<li class="sk_goods">
					<img src="./uploads/mobile.jpg" alt="">
					<h5 class="sk_goods_title">Apple苹果iphone 6s Plus (A1699) 32G 金色
						移动联通电信4G手机	
					</h5>
					<p class="sk_goods_price"><em>￥6080</em><del>￥6900</del></p>
					<div class="sk_goods_progress">
						已售<em>87%</em>
						<div class="bar">
							<div class="bar_in">
								
							</div>
						</div>
						剩余<em>89</em>件
					</div>
					<a href="#" class="sk_goods_buy">立即抢购</a>
				</li>
				<li class="sk_goods">
					<img src="./uploads/mobile.jpg" alt="">
					<h5 class="sk_goods_title">Apple苹果iphone 6s Plus (A1699) 32G 金色
						移动联通电信4G手机	
					</h5>
					<p class="sk_goods_price"><em>￥6080</em><del>￥6900</del></p>
					<div class="sk_goods_progress">
						已售<em>87%</em>
						<div class="bar">
							<div class="bar_in">
								
							</div>
						</div>
						剩余<em>89</em>件
					</div>
					<a href="#" class="sk_goods_buy">立即抢购</a>
				</li>
				<li class="sk_goods">
					<img src="./uploads/mobile.jpg" alt="">
					<h5 class="sk_goods_title">Apple苹果iphone 6s Plus (A1699) 32G 金色
						移动联通电信4G手机	
					</h5>
					<p class="sk_goods_price"><em>￥6080</em><del>￥6900</del></p>
					<div class="sk_goods_progress">
						已售<em>87%</em>
						<div class="bar">
							<div class="bar_in">
								
							</div>
						</div>
						剩余<em>89</em>件
					</div>
					<a href="#" class="sk_goods_buy">立即抢购</a>
				</li>
				<li class="sk_goods">
					<img src="./uploads/mobile.jpg" alt="">
					<h5 class="sk_goods_title">Apple苹果iphone 6s Plus (A1699) 32G 金色
						移动联通电信4G手机	
					</h5>
					<p class="sk_goods_price"><em>￥6080</em><del>￥6900</del></p>
					<div class="sk_goods_progress">
						已售<em>87%</em>
						<div class="bar">
							<div class="bar_in">
								
							</div>
						</div>
						剩余<em>89</em>件
					</div>
					<a href="#" class="sk_goods_buy">立即抢购</a>
				</li>
				<li class="sk_goods">
					<img src="./uploads/mobile.jpg" alt="">
					<h5 class="sk_goods_title">Apple苹果iphone 6s Plus (A1699) 32G 金色
						移动联通电信4G手机	
					</h5>
					<p class="sk_goods_price"><em>￥6080</em><del>￥6900</del></p>
					<div class="sk_goods_progress">
						已售<em>87%</em>
						<div class="bar">
							<div class="bar_in">
								
							</div>
						</div>
						剩余<em>89</em>件
					</div>
					<a href="#" class="sk_goods_buy">立即抢购</a>
				</li>
				<li class="sk_goods">
					<img src="./uploads/mobile.jpg" alt="">
					<h5 class="sk_goods_title">Apple苹果iphone 6s Plus (A1699) 32G 金色
						移动联通电信4G手机	
					</h5>
					<p class="sk_goods_price"><em>￥6080</em><del>￥6900</del></p>
					<div class="sk_goods_progress">
						已售<em>87%</em>
						<div class="bar">
							<div class="bar_in">
								
							</div>
						</div>
						剩余<em>89</em>件
					</div>
					<a href="#" class="sk_goods_buy">立即抢购</a>
				</li>
				<li class="sk_goods">
					<img src="./uploads/mobile.jpg" alt="">
					<h5 class="sk_goods_title">Apple苹果iphone 6s Plus (A1699) 32G 金色
						移动联通电信4G手机	
					</h5>
					<p class="sk_goods_price"><em>￥6080</em><del>￥6900</del></p>
					<div class="sk_goods_progress">
						已售<em>87%</em>
						<div class="bar">
							<div class="bar_in">
								
							</div>
						</div>
						剩余<em>89</em>件
					</div>
					<a href="#" class="sk_goods_buy">立即抢购</a>
				</li>
				<li class="sk_goods">
					<img src="./uploads/mobile.jpg" alt="">
					<h5 class="sk_goods_title">Apple苹果iphone 6s Plus (A1699) 32G 金色
						移动联通电信4G手机	
					</h5>
					<p class="sk_goods_price"><em>￥6080</em><del>￥6900</del></p>
					<div class="sk_goods_progress">
						已售<em>87%</em>
						<div class="bar">
							<div class="bar_in">
								
							</div>
						</div>
						剩余<em>89</em>件
					</div>
					<a href="#" class="sk_goods_buy">立即抢购</a>
				</li>
				<li class="sk_goods">
					<img src="./uploads/mobile.jpg" alt="">
					<h5 class="sk_goods_title">Apple苹果iphone 6s Plus (A1699) 32G 金色
						移动联通电信4G手机	
					</h5>
					<p class="sk_goods_price"><em>￥6080</em><del>￥6900</del></p>
					<div class="sk_goods_progress">
						已售<em>87%</em>
						<div class="bar">
							<div class="bar_in">
								
							</div>
						</div>
						剩余<em>89</em>件
					</div>
					<a href="#" class="sk_goods_buy">立即抢购</a>
				</li>
				<li class="sk_goods">
					<img src="./uploads/mobile.jpg" alt="">
					<h5 class="sk_goods_title">Apple苹果iphone 6s Plus (A1699) 32G 金色
						移动联通电信4G手机	
					</h5>
					<p class="sk_goods_price"><em>￥6080</em><del>￥6900</del></p>
					<div class="sk_goods_progress">
						已售<em>87%</em>
						<div class="bar">
							<div class="bar_in">
								
							</div>
						</div>
						剩余<em>89</em>件
					</div>
					<a href="#" class="sk_goods_buy">立即抢购</a>
				</li>
			</ul>
		</div>

	</div>

	<!-- page 分页制作 -->
	<div class="page">
		<span class="page_num">
			<a href="#" class="pn_prev">&lt;&lt;上一页</a>
			<a href="#">1</a>
			<a href="#" class="current">2</a>
			<a href="#">3</a>
			<a href="#">4</a>
			<a href="#">5</a>
			<a href="#" class="dotted">...</a>
			<a href="#" class="pn_next">下一页&gt;&gt;</a>
		</span>
		<span class="page_skip">
			共10页 到第
				<input type="text">
				<button>确定</button>
			页
		</span>
	</div>

	<!-- footer 网页底部制作 -->
	<div class="footer">
		<div class="w">
			<div class="mod_service">
				<ul>
					<li>
						<i class="mod_service_icon mod_service_zheng"></i>
						<div class="mod_service_title">
							<h5>正品保障</h5>
							<p>正品保障 提供发货</p>
						</div>
					</li>
					<li>
						<i class="mod_service_icon mod_service_ji"></i>
						<div class="mod_service_title">
							<h5>正品保障</h5>
							<p>正品保障 提供发货</p>
						</div>
					</li>
					<li>
						<i class="mod_service_icon mod_service_bao"></i>
						<div class="mod_service_title">
							<h5>正品保障</h5>
							<p>正品保障 提供发货</p>
						</div>
					</li>
					<li>
						<i class="mod_service_icon mod_service_bao"></i>
						<div class="mod_service_title">
							<h5>正品保障</h5>
							<p>正品保障 提供发货</p>
						</div>
					</li>
					<li>
						<i class="mod_service_icon mod_service_bao"></i>
						<div class="mod_service_title">
							<h5>正品保障</h5>
							<p>正品保障 提供发货</p>
						</div>
					</li>
				</ul>
			</div>
			<div class="mod_help">
				<dl class="mod_help_item">
					<dt class="mod_help_dt">购物指南</dt>
					<dd><a href="#">购物流程</a></dd>
					<dd><a href="#">会员介绍</a></dd>
					<dd><a href="#">生活旅行/团购</a></dd>
					<dd><a href="#">常见问题</a></dd>
					<dd><a href="#">大 家电</a></dd>
					<dd><a href="#">联系客服</a></dd>
				</dl>
				<dl class="mod_help_item">
					<dt class="mod_help_dt">购物指南</dt>
					<dd><a href="#">购物流程</a></dd>
					<dd><a href="#">会员介绍</a></dd>
					<dd><a href="#">生活旅行/团购</a></dd>
					<dd><a href="#">常见问题</a></dd>
					<dd><a href="#">大 家电</a></dd>
					<dd><a href="#">联系客服</a></dd>
				</dl>
				<dl class="mod_help_item">
					<dt class="mod_help_dt">购物指南</dt>
					<dd><a href="#">购物流程</a></dd>
					<dd><a href="#">会员介绍</a></dd>
					<dd><a href="#">生活旅行/团购</a></dd>
					<dd><a href="#">常见问题</a></dd>
					<dd><a href="#">大 家电</a></dd>
					<dd><a href="#">联系客服</a></dd>
				</dl>
				<dl class="mod_help_item">
					<dt class="mod_help_dt">购物指南</dt>
					<dd><a href="#">购物流程</a></dd>
					<dd><a href="#">会员介绍</a></dd>
					<dd><a href="#">生活旅行/团购</a></dd>
					<dd><a href="#">常见问题</a></dd>
					<dd><a href="#">大 家电</a></dd>
					<dd><a href="#">联系客服</a></dd>
				</dl>
				<dl class="mod_help_item">
					<dt class="mod_help_dt">购物指南</dt>
					<dd><a href="#">购物流程</a></dd>
					<dd><a href="#">会员介绍</a></dd>
					<dd><a href="#">生活旅行/团购</a></dd>
					<dd><a href="#">常见问题</a></dd>
					<dd><a href="#">大 家电</a></dd>
					<dd><a href="#">联系客服</a></dd>
				</dl>
				<dl class="mod_help_item mod_help_app">
					<dt class="mod_help_dt">帮助中心</dt>
					<dd>
						<img src="./uploads/erweima.png" alt="">
						<p>品优购客户端</p>
					</dd>
				</dl>
			</div>
			<div class="mod_copyright">
				<p class="mod_copyright_links">
					关于我们 | 练习我们 | 联系客服 | 关于我们 | 练习我们 | 联系客服 | 关于我们 | 练习我们 | 联系客服 | 关于我们 | 练习我们 | 联系客服 
				</p>
				<center>
				<p class="mod_copyright_info">
					<font size="1"><b>版权：&copy;:版权所有，计科三班，黄栋林,仅供学习使用！</b></font>
					<address>E-mail:huangdonglin@qq.com</address>
					<a href="http://beian.miit.gov.cn">备案号：豫ICP备2020030630号-1</a>
				</p>
				</center>
			</div>

		</div>
	</div>
</body>
</html>